<template>
  <div class="h-seat-container">
    <!-- 上方所有座位 -->
    <div class="h-seats-box">
        <span v-for="item in seatArr" :key="'序号' + item.id"
              @click="selectSeatFn(item)" :class="{'h-my-active-seat': item.seat === '我已选', 'h-active-seat': item.seat === '已选', 'h-no-select': item.seat === '未选'}">
            {{item.seatNum}}
        </span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'highSeat',
  props: {
    price: Number,
    seatData: Array
  },
  data () {
    return {
      totalPrice: 0,
      seatArr: [], // 所有座位
      selectArr: [] // 选择的座位
    }
  },
  created () {
    for (let i = 0; i < this.seatData.length; i++) { // 准备数据
      if (this.seatData[i].bePurchased) {
        this.seatData[i].seat = '已选'
      } else {
        this.seatData[i].seat = '未选'
      }
      this.seatData[i].idx = i
      this.seatArr.push(this.seatData[i])
    }
  },
  methods: {
    selectSeatFn (item) {
      let index = item.idx
      if (item.seat === '已选') return
      this.seatArr.forEach(item => {
        if (item.idx === index && item.seat === '未选') { // 点击选择座位
          item.seat = '我已选' // 替换文字
          this.totalPrice += this.price
        } else if (item.idx === index && item.seat === '我已选') { // 点击取消座位
          item.seat = '未选'
          this.totalPrice -= this.price
        }
      })
      this.$forceUpdate()
      this.$emit('changeTotalPrice', this.totalPrice)
      this.seatArr.forEach(item => {
        if (item.seat === '我已选' && !this.selectArr.includes(item.id)) {
          this.selectArr.unshift(item.id) // 将选中的座位序号加到数组中
        } else if (this.selectArr.includes(item.id) && item.seat === '未选') {
          // 将取消座位的序号过滤掉
          this.selectArr = this.selectArr.filter(selectItem => selectItem !== item.id)
        }
      })
      this.$emit('changeSeatIdArr', this.selectArr)
    }
  }
}
</script>

<style lang="less">
.h-my-active-seat{
  background: #22b14c!important;
  color: #FFFFFF!important;
}
.h-active-seat{
  background: #ee1c25!important;
  color: #FFFFFF!important;
}
.h-no-select{
  cursor: pointer;
}
.h-seat-container{
  width: 600px;
  padding: 5px;
  border: 1px solid #eee;
  text-align: center;
  user-select: none; // 禁选文字，防止点击时选中文字，影响视觉效果
  .h-seats-box{
    display: flex;
    width: 100%;
    justify-content: space-around;
    flex-wrap: wrap;
    span{
      position: relative;
      flex: 5%;
      height: 30px;
      margin: 5px;
      background-color: #eee;
      color: #999999;
      line-height: 30px; // 大小应于高度一致，才能保证垂直居中效果
      font-size: 10px;
    }
  }
}
</style>
